<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>阳台宝贝</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="众测天下@zhongcetianxia.com">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link href="https://cdn.bootcss.com/light7/0.4.3/css/light7.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/light7/0.4.3/css/light7-swiper.min.css" rel="stylesheet">
  <link href="../assets/css/webapp.css" rel="stylesheet">
  <link href="../lib/iconfont/iconfont.css" rel="stylesheet">
  <style type="text/css">
  
  .label-check {
    display: block;
    float: left;
    margin-right: 0.35rem;
    cursor: pointer;
    position: relative;
  }
  
  .label-check input {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #CCC;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
  }
  
  .label-check input[type=radio]:checked + span {
    border-color: #F60;
    color: #F60;
    background: url("../assets/images/mall/check-on.png") no-repeat right bottom;
    background-size: 0.75rem auto;
  }
  
  .label-check span {
    display: block;
    line-height: 1.55rem;
    height: 1.55rem;
    padding: 0 0.20rem;
    border: 1px solid #DDD;
    color: #343434;
    border-radius: 2px;
    -webkit-border-radius: 2px;
  }
  
  .numbox .minus,
  .numbox .plus {
    display: inline-block!important;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    border: solid 1px #eaeaea;
    background: #f5f5f5;
    color: #9e9e9e;
    font-size: 0.75rem;
    float: left;
  }
  
  .numbox input {
    display: inline-block!important;
    border-top: solid 1px #eaeaea!important;
    border-bottom: solid 1px #eaeaea!important;
    height: 1.5rem!important;
    width: 3.0rem!important;
    margin-left: -0.4rem!important;
    text-align: center;
    padding: 0!important;
    float: left;
  }
  
  .numbox input::textfield-decoration-container {}
  
  .numbox input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  
  .numbox input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    /* 有无看不出差别 */
  }
  
  .numbox .plus {
    margin-left: -0.4rem;
  }
  
  .item-goods {
    position: relative;
  }
  
  .item-goods .add-cart {
    position: absolute;
    bottom: 0.85rem;
    right: 0.75rem
  }
  .button.add-cart{
    position:static;
  }
  </style>
</head>

<body class="theme-green">
  <div class="fixed-bottom-right">
    <a class="button button-fill button-big button-warning button-square bg-alpha r-circle badge-icon cart" href="../Mall/cart.html">
      <i class="iconfont icon-shopper fs-4x"></i>
      <span class="badge badge-white badge-circle">0</span>
    </a>
  </div>
  <div class="page bg-white" id="detail-page">
    <div class="footbar fixed-bottom bg-grey b bt">
      <div class="item-goods" data-id="12" data-price="165" data-media="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" data-title="郭元益金缕奶皇什锦礼盒月饼" data-spec='{净含量,248ml*9盒/箱|248ml*12盒/箱}'>
        <a class="button button-fill button-big button-warning add-cart open-popup" data-popup=".popup-goods"><i class="iconfont icon-wozhongzhitubiao256x256px13"></i> 加入购物车 </a>
      </div>
    </div>
    <div class="content" id='detail-page'>
      <div class="page-detail">
        <div class="swiper-container swiper-innder swiper-container-horizontal" data-space-between='0' data-pagination='.swiper-pagination' data-autoplay="1000" data-loop="true" style="padding-bottom: 10px">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class='w-full' src="https://gd1.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class='w-full' src="https://gd3.alicdn.com/imgextra/i3/238126515/TB21mEfcFXXXXc5XXXXXXXXXXXX_!!238126515.jpg_640x640.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class='w-full' src="https://gd2.alicdn.com/imgextra/i2/238126515/TB2TpgmcFXXXXbwXXXXXXXXXXXX_!!238126515.jpg_640x640.jpg" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="list-block list-base media-list mv-no">
          <ul class="bt-no">
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">郭元益粤品汉香礼盒月饼</div>
                  </div>
                  <div class="item-excerpt fs-0x color-warning">台湾百大品牌郭元益。配饼说明：广式豆沙唐宁月饼110克， 广式菠萝椰纤果月饼110克，台式豆沙碎蛋月饼110克，台式菠萝月饼110克，卤肉绿豆椪（馅饼）100克，绿豆沙绿豆椪（馅饼）100克，共6枚。</div>
                  <div class="item-subtitle"><span class="color-danger fs-2x">$165</span> <del class="color-grey">$190</del></div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-subtitle"><span class="color-grey">净含量：</span>248ml*9盒/箱</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-subtitle"><span class="color-grey">产地：</span>深圳</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-subtitle"><span class="color-grey">顺丰全国包邮。按订单顺序陆续发货。</span></div>
                </div>
              </div>
            </li>
            <li class="divider"></li>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">商品详情</div>
                    <div class="item-after color-grey">点击查看</div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="divider"></div>
        <div class="list-block media-list mv-no">
          <ul class="b-no">
            <li>
              <a href="../Mall/lists.html" class="item-link item-content">
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">更多商品</div>
                    <div class="item-after color-grey">点击查看</div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="row no-gutter list-goods">
          <div class="item-goods col col-50" data-id="1" data-price="165" data-media="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" data-title="郭元益金缕奶皇什锦礼盒月饼" data-spec='{净含量,248ml*9盒/箱|248ml*12盒/箱}'>
            <a class="card block" href="../Mall/details.html">
              <div class="card-content">
                <div class="item-media"><img src="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" class="w-full"></div>
                <div class="card-content-inner text-nowrap-2x color-dark">郭元益金缕奶皇什锦礼盒月饼</div>
              </div>
              <div class="card-footer pv-no">
                <span class="color-danger">$165</span>
              </div>
            </a>
            <span class="add-cart color-warning open-popup" data-popup=".popup-goods"><i class="iconfont icon-jiarugouwuche fs-2x"></i></span>
          </div>
          <div class="item-goods col col-50" data-id="2" data-price="120" data-media="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" data-title="澳门原装进口 澳之味蛋挞奶黄月饼" data-spec='{净含量,248ml*9盒/箱|248ml*12盒/箱}'>
            <a class="card block" href="../Mall/details.html">
              <div class="card-content">
                <div class="item-media"><img src="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" class="w-full"></div>
                <div class="card-content-inner text-nowrap-2x color-dark">澳门原装进口 澳之味蛋挞奶黄月饼</div>
              </div>
              <div class="card-footer pv-no">
                <span class="color-danger">$120</span>
              </div>
            </a>
            <span class="add-cart color-warning open-popup" data-popup=".popup-goods"><i class="iconfont icon-jiarugouwuche fs-2x"></i></span>
          </div>
          <div class="item-goods col col-50" data-id="3" data-price="180" data-media="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" data-title="有机蔬菜玫瑰饼8枚装" data-spec='{净含量,248ml*9盒/箱|248ml*12盒/箱}'>
            <a class="card block" href="../Mall/details.html">
              <div class="card-content">
                <div class="item-media"><img src="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" class="w-full"></div>
                <div class="card-content-inner text-nowrap-2x color-dark">有机蔬菜玫瑰饼8枚装</div>
              </div>
              <div class="card-footer pv-no">
                <span class="color-danger">$180</span>
              </div>
            </a>
            <span class="add-cart color-warning open-popup" data-popup=".popup-goods"><i class="iconfont icon-jiarugouwuche fs-2x"></i></span>
          </div>
          <div class="item-goods col col-50" data-id="4" data-price="328" data-media="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" data-title="奇华五仁果子月饼" data-spec='{净含量,248ml*9盒/箱|248ml*12盒/箱}'>
            <a class="card block" href="../Mall/details.html">
              <div class="card-content">
                <div class="item-media"><img src="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&end=91196046" class="w-full"></div>
                <div class="card-content-inner text-nowrap-2x color-dark">奇华五仁果子月饼</div>
              </div>
              <div class="card-footer pv-no">
                <span class="color-danger">$328</span>
              </div>
            </a>
            <span class="add-cart color-warning open-popup" data-popup=".popup-goods"><i class="iconfont icon-jiarugouwuche fs-2x"></i></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- popup -->
  <div class="popup popup-half popup-goods goods-para" data-id="0">
    <header class="bar bar-nav bar-big">
      <a class="icon iconfont icon-iconfonticonfontclose button button-link button-nav pull-right color-grey close-popup"></a>
      <div class="list-block media-list list-base m-no">
        <ul class="list-container b-no">
          <li class="item-goods">
            <div class="item-content">
              <div class="item-media"><img src="../assets/images/placeholder.jpg" class="thumb-1x thumbnail b"></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">商品名称</div>
                </div>
                <div class="item-subtitle"><span class="color-danger">$<span class="item-price">0</span></span></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </header>
    <div class="footbar fixed-bottom text-center">
      <a class="button button-fill button-big button-danger close-popup add-to-cart"><i class="iconfont icon-wozhongzhitubiao256x256px13"></i> 加入购物车 </a>
    </div>
    <div class="content">
      <div class="list-block media-list list-base m-no">
        <ul class="list-container list-specs">
          <li class="item-spec">
            <!--<div class="item-content">
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">规格</div>
                </div>
                <div class="clearfix">
                  <label class="label-check">
                    <input type="radio" name="productItemId" pri="189.0" value="80000148" checked="checked"><span>248ml*9盒/箱</span></label>
                  <label class="label-check">
                    <input type="radio" name="productItemId" pri="189.0" value="80000148"><span>248ml*9盒/箱</span></label>
                </div>
              </div>
            </div>-->
          </li>
          <li>
            <div class="item-content">
              <div class="item-media">购买数量</div>
              <div class="item-inner">
                <div class="numbox pull-right">
                  <button class="minus" type="button">-</button>
                  <input class="numbox" type="number" id="num" value="1" />
                  <button class="plus" type="button">+</button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /popup -->
  <script src="../lib/js/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">$.config = {router: false}</script>
  <script src="../lib/light7/js/light7.min.js"></script>
  <script src="https://cdn.bootcss.com/light7/0.4.3/js/light7-swiper.min.js"></script>
  <script src="../assets/js/webapp.js"></script>
  <script type="text/javascript">
  $(function(){

    $.init();
  });
  </script>
</body>

</html>
